<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
<%@include file="../base/frameBase.jsp" %>
<body>
<div class="add_course">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>填写开设课程的具体信息</legend>
    </fieldset>
    <form class="layui-form" action="" id="createForm">
        <div class="layui-form-item">
            <label class="layui-form-label">课程名称</label>
            <div class="layui-input-block">
                <input type="text" name="course_title" lay-verify="title" autocomplete="off" placeholder="请输入课程标题"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">课程简介</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入课程的简介内容（选填）" class="layui-textarea" name="course_desc"></textarea>
            </div>
        </div>
        <div class="layui-form-item category-div">
            <label class="layui-form-label">课程类别</label>
            <div class="layui-input-block category-sel">
                <select id="category" name="category" lay-filter="aihao">
                    <option value="1">请选择</option>
                </select>
            </div>
            <i class="layui-icon category">&#xe60a;</i>
        </div>

        <div class="layui-form-item category-div">
            <label class="layui-form-label">封面图片</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn-xs layui-btn-primary" id="courseImg">上传图片</button>
                <div class="layui-upload-list">
                    <img class="layui-upload-img img-upload" id="img">
                    <p id="demoText"></p>
                </div>
                <input type="hidden" name="course_img" id="course_imgup">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="confim">确认开课</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
        <hr>
    </form>

</div>

<script>
    layui.use(['form', 'layedit', 'laydate', 'upload'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , upload = layui.upload
        var $ = layui.jquery;

        $.ajax({
            url: '${ctx}/videoData/getCategory',
            method: 'GET',
            contentType: 'application/json',
            success: function (res) {
                console.log(res);
                // 渲染课程分类菜单
                var category = res.data;
                var option = '';
                $.each(category, function (id, value) {
                    option += '<option value="' + value.id + '">' + value.category + '</option>';
                })
                $("#category").html(option);
                form.render();
            },
            error: function (res) {
                alert(res.data);
            }
        })

        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');

        //自定义验证规则
        form.verify({
            title: function (value) {
                if (value.length < 1) {
                    return '标题至少得写点什么啊';
                }
            },
            content: function (value) {
                layedit.sync(editIndex);
            }
        });

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#courseImg'
            , url: '${ctx}/videoData/uploadCourseImg'
            , method: 'POST'
            , xhr: function (fun) {
                // 进度条监听器
                this.onprogress = fun; //绑定监听
                //使用闭包实现监听绑
                return function () {
                    //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
                    var xhr = $.ajaxSettings.xhr();
                    //判断监听函数是否为函数
                    if (typeof this.onprogress !== 'function')
                        return xhr;
                    //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
                    if (this.onprogress && xhr.upload) {
                        xhr.upload.onprogress = this.onprogress;
                    }
                    return xhr;
                }
            }
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#img').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                console.log(res)
                //上传成功
                if (res.code == '00000') {
                    layer.msg('上传成功');
                    var imgInput =  $('#course_imgup');
                    imgInput.val(res.data)
                } else {
                    return layer.msg('上传失败')
                }
            }
            , error: function () {
                //失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> ' +
                    '<a class="layui-btn layui-btn-mini img-reload">重试</a>');
                demoText.find('.img-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });

        //监听提交
        form.on('submit(confim)', function (data) {
            delete data.field.file;

            $.ajax({
                url: '${ctx}/videoData/addCourse',
                method: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(data.field),
                success: function (res) {
                    layer.msg("课程提交成功")
                    $(':input', '#createForm')
                        .not(':button, :submit, :reset, :hidden')
                        .val('')
                        .removeAttr('checked')
                        .removeAttr('selected');
                },
                error: function (res) {
                    alert(res.data);
                }
            })
            return false;
        });
    });
</script>
<%@include file="../base/frameFoot.jsp" %>